<template>
    <div>
        <mgs-l-map
            @onMapInited="mapInited"
            :plugins="['analysis']"
            :pluginOptions="pluginOptions"
            style="height: 500px"
        />

        <hr />

        <!-- ---------- 控件部分 START ----------- -->
        <BaseMapSwitch :bindMap="bindMap" :baseMaps="baseMaps" />
        <br />
        <Zoom :bindMap="bindMap" />
        <br />
        <MapSwitch :mgsMapView="{ is3d: true }" />
        <br />
        <!-- ---------- 控件部分 END ----------- -->
    </div>
</template>

<script>
import BaseMapSwitch from '@mgs/components-map/mgs-ctrl-basemap-switch.vue';
import Zoom from '@mgs/components-map/mgs-ctrl-zoom.vue';
import MapSwitch from '@mgs/components-map/mgs-ctrl-map-switch.vue';

export default {
    components: { BaseMapSwitch, Zoom, MapSwitch },
    data() {
        return {
            baseMaps: [
                {
                    title: '矢量',
                    thumbnail:
                        'http://192.168.3.183:9864/webhdfs/v1/basemapimg/20210521122816.png?op=OPEN&namenoderpcaddress=ceph27:9000&offset=0',
                    services: [
                        {
                            pkid: '6f4ef0450ae048bb9b9ab2e902366d14',
                            servicetype: 1,
                            nodetype: 's',
                            serviceurl:
                                '/geoesb/proxy/services/maps/rest/6f4ef0450ae048bb9b9ab2e902366d14/{userKey}',
                            basemap_title: '全球矢量图',
                            pid: 2,
                            order_index: 1,
                            servicename: '全球矢量图',
                            serviceid: '6f4ef0450ae048bb9b9ab2e902366d14',
                        },
                    ],
                },
                {
                    title: '地形',
                    thumbnail:
                        'http://192.168.3.183:9864/webhdfs/v1/basemapimg/20210521122821.png?op=OPEN&namenoderpcaddress=ceph27:9000&offset=0',
                    services: [
                        {
                            pkid: '265f571f478243829e123da23426dbb4',
                            servicetype: 1,
                            nodetype: 's',
                            serviceurl:
                                '/geoesb/proxy/services/maps/rest/265f571f478243829e123da23426dbb4/{userKey}',
                            basemap_title: '全球地形晕眩图',
                            pid: 3,
                            order_index: 1,
                            servicename: '全球地形晕眩图',
                            serviceid: '265f571f478243829e123da23426dbb4',
                        },
                    ],
                },
                {
                    title: '影像',
                    thumbnail:
                        'http://192.168.3.183:9864/webhdfs/v1/basemapimg/20210521122824.png?op=OPEN&namenoderpcaddress=ceph27:9000&offset=0',
                    services: [
                        {
                            pkid: '80739f05af994153a189e8c44ab98c3d',
                            servicetype: 1,
                            nodetype: 's',
                            serviceurl:
                                '/geoesb/proxy/services/maps/rest/80739f05af994153a189e8c44ab98c3d/{userKey}',
                            basemap_title: '全球影像',
                            pid: 1,
                            order_index: 1,
                            servicename: '全球影像',
                            serviceid: '80739f05af994153a189e8c44ab98c3d',
                        },
                    ],
                },
            ],
        };
    },
    methods: {
        mapInited(mapvm) {
            mapvm.addService(
                '1',
                'arcgisrestmap',
                'https://server.arcgisonline.com/arcgis/rest/services/Specialty/DeLorme_World_Base_Map/MapServer'
            );
            this.bindMap = mapvm;
        },
    },
};
</script>
